<template>
    <div style="padding:15px;background-color: #3f3f3f;">
        <p class="pl15" style="font-size: 12px;">我关注的用户</p>
        <div class="flow-user-list">
            <template v-for="(fItem, index) in 10" :key="index">
                <div class="flow-user-item">
                    <img src="../../../assets/fllow.webp" alt="" class="user-avatar">
                    <span class="liked"></span>
                    <div class="basic-info">
                        <p class="user-name">黄油小郎君</p>
                        <p class="user-info-day">
                            · 已注册188天
                        </p>
                        <p class="user-info-number">
                            · 已玩游戏78
                        </p>
                    </div>
                </div>
            </template>
        </div>
        <p style="font-size: 12px;" class="pl15 mb20 mt10">我关注的游戏</p>
        <template v-for="(item, index) in interestList" :key="index">
            <div class="flow-game-item">
                <div class="bl">
                    <img :src="item.cover" alt="" class="user-avatar w-60px h-60px rounded-full">
                    <span class="liked"></span>
                </div>
                <div class="bc">
                    <p style="color: #a7a7a7;font-size: 12px;"> {{ item.name }}</p>
                    <p style="color: #4cb4fc;font-size: 12px;text-decoration: underline;">
                        前往游戏讨论版
                    </p>
                </div>
                <div class="br">
                    <div class="btn" @click="handleDownload(item)">
                        下载
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
defineProps(['fllowList', 'interestList'])

// 下载
const handleDownload = (item) => {
    console.log("=>(myFllow.vue:49) item", item);
    if (item.download_url) {
        window.open(item.download_url)
    }
}
</script>

<style scoped lang="scss">
.flow-user-list {
    width: 100%;
    height: 120px;
    align-items: center;
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-left: 15px;

    .flow-user-item {
        position: relative;
        min-width: 88px;
        height: 88px;

        .basic-info {
            // z-index: 1;
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;

            p {
                line-height: 11px;
            }

            .user-name {
                font-size: 9px;
                line-height: 14px;
            }

            .user-info-day {
                font-size: 7px;
                color: #a4a4a4;
            }

            .user-info-number {
                font-size: 7px;
                color: #a4a4a4;
            }

        }

        .user-avatar {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .liked {
            display: inline-block;
            position: absolute;
            right: -8px;
            top: 8px;
            width: 25px;
            height: 25px;
            background: url('../../../assets/liked.png') no-repeat center;
            background-size: contain;
        }
    }
}

.flow-game-item {
    background-color: #2f2f2f;
    border-radius: 30px;
    display: flex;
    padding-right: 20px;
    margin: 0 20px 20px;


    .bl {
        width: 60px;
        height: 60px;
        flex-grow: 0;
        position: relative;

        .liked {
            display: inline-block;
            position: absolute;
            left: -0;
            top: -2px;
            width: 20px;
            height: 20px;
            background: url('../../../assets/liked.png') no-repeat center;
            background-size: contain;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .bc {
        flex-grow: 1;
        padding-left: 10px;
    }

    .br {
        width: 73px;
        flex-grow: 0;
        display: flex;
        align-items: center;

        .btn {
            font-size: 12px;
            width: 73.5px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            object-fit: contain;
            border-radius: 11px;
            background-color: #ea49a7;
        }
    }

}
</style>
